<template>
	<div>
		<div>
			<Button icon="plus" @click="addData">添加</Button>			
			<Button icon="trash-a" @click="deleSelectData">选中删除</Button>
			<Input v-model="filter.name">
                <Button slot="append" icon="ios-search" @click="search"></Button>         
            </Input>
		</div>
        <Table border ref="selection" @on-selection-change="getIds" :columns="columns1" :data="list" style="margin-top:10px;"></Table>
        <Page :total="filter.total" size="small" show-total show-elevator show-sizer :page-size="2" :page-size-opts="[2,4,6,8]" @on-change="changePage" @on-page-size-change="changePageSize" style="margin-top:15px;"></Page>

		<Modal
	        v-model="modal1"
	        title="添加/修改用户"
	        @on-ok="ok"
	        @on-cancel="cancel">
	        <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="80">
		        <FormItem label="姓名" prop="name">
		            <Input v-model="formValidate.name" placeholder="请输入姓名"></Input>
		        </FormItem>
		        <FormItem label="密码" prop="password">
		            <Input v-model="formValidate.password" placeholder="请输入密码"></Input>
		        </FormItem>		        	        
		        <FormItem>
		            <Button type="primary" @click="handleSubmit('formValidate')">提交</Button>
		            <Button type="ghost" @click="handleReset('formValidate')" style="margin-left: 8px">重置</Button>		            
		        </FormItem>
		    </Form>
	    </Modal>
	</div>    
</template>
<script>
    import Base from '../../common/Base.js'
    export default {
        mixins:[Base],
        data () {
            return {
                module:'users',
                columns1: [
                	{
                        type: 'selection',
                        width: 60,
                        align: 'center'
                    },
                    {
                        title: '姓名',
                        key: 'name'
                    },
                    {
                        title: '密码',
                        key: 'password'
                    },
                    {
                        title: '操作',
                        key: 'action',
                        fixed: 'right',
                        width: 250,
                        render: (h, params) => {
                            return h('div', [
                            	h('Button', {
                                    props: {
                                        type: 'text',
                                        icon: 'eye'
                                    },
                                    on: {
                                        click: () => { 
                                        	//console.log(params);
                                            this.show(params.index)
                                        }
                                    }     
                                }, '查看'),
                                h('Button', {
                                    props: {
                                        type: 'text',
                                        size: 'small',
                                        icon: 'edit'
                                    },
                                    on: {
                                        click: () => { 
                                            this.editData(params.row._id);
                                        }
                                    }
                                }, '修改'),
                                h('Button', {
                                    props: {
                                        type: 'text',
                                        size: 'large',
                                        icon: 'trash-a'
                                    },
                                    on: {
                                        click: () => {
                                        	this.deleData(params.row._id);
                                        }
                                    }
                                }, '删除')
                            ]);
                        }
                    }
                ],
                formValidate: {
                    name: '',                   
                    password: ''                    
                },
                ruleValidate: {
                    name: [
                        { required: true, message: '姓名不能为空', trigger: 'blur' }
                    ],                    
                    password: [
                        { required: true, message: '请填写密码', trigger: 'blur' },
                        { type: 'string', min: 6, message: '密码长度不能小于6位', trigger: 'blur' }
                    ]
                }
            }
            
        },
        methods:{
        	show (index) {
                this.$Modal.info({
                    title: '用户信息',
                    content: `姓名：${this.list[index].name}<br>密码：${this.list[index].password}<br>`
                })
            },
        	ok () {        		
                this.$Message.info('点击了确定');

            },
            cancel () {
                this.$Message.info('点击了取消');
            }
        }
    }
</script>

<style>
	
</style>